<template>
	<a-select :options="options" class="w-120px" v-model:value="modelValue" @change="onChange">
	</a-select>
</template>

<script setup lang="ts">
import { SelectProps } from 'ant-design-vue/es/vc-select/Select';
import { ReservationStatus } from '../../types/reservation';
interface Props {
	value: string;
	disabledOptions?: string;
}
const props = defineProps<Props>();
const emits = defineEmits<{ 'update:value': [value: string] }>();
const modelValue = ref<string>(props.value);

const options = ref<SelectProps['options']>(
	Object.keys(ReservationStatus).map((x) => ({
		label: x,
		value: x,
		disabled: x === props.disabledOptions,
	})),
);

const onChange = (value: any) => {
	emits('update:value', value);
};
</script>
<style lang="less" scoped></style>
